<template>
	<view v-if="props.show" class="gy-form-item" :class="{border: props.border}">
        <view class="gy-form-item-box" :class="props.labelPosition">
            <view class="gy-form-item-label" :style="{width: props.labelWidth}">
                <text class="required" v-if="props.required">*</text>{{ props.label }}
                <text class="sub-label" v-if="props.subLabel">{{ props.subLabel }}</text>
            </view>
            <view class="gy-form-item-value" :style="{width: `calc(100% - ${ props.labelWidth })`}">
                <slot>
                    <input
                        v-if="props.inputType === 'text'"
                        :value="props.modelValue"
                        type="text"
                        :placeholder="props.placeholder || ('请输入' + props.label)"
                        :maxlength="props.maxlength"
                        placeholder-class="input-placeholder"
                        :style="{textAlign: props.inputTextAlign}"
                        @input="inputFn($event)"
						@blur="emits('blur')" />
						<input
							v-if="props.inputType === 'number'"
							v-model="inputValue"
							type="digit"
							:placeholder="props.placeholder || ('请输入' + props.label)"
							:maxlength="props.maxlength"
							placeholder-class="input-placeholder"
							:style="{textAlign: props.inputTextAlign}"
							@input="inputNumberFn($event)"
							@blur="emits('blur')"
						/>
					<input
					    v-if="props.inputType === 'idcard'"
					    :value="props.modelValue"
					    type="idcard"
					    :placeholder="props.placeholder || ('请输入' + props.label)"
					    :maxlength="props.maxlength"
					    placeholder-class="input-placeholder"
					    :style="{textAlign: props.inputTextAlign}"
					    @input="inputFn($event)"
						@blur="emits('blur')" />
					<input
					    v-if="props.inputType === 'phone'"
					    :value="props.modelValue"
					    type="number"
					    :placeholder="props.placeholder || ('请输入' + props.label)"
					    :maxlength="props.maxlength"
					    placeholder-class="input-placeholder"
					    :style="{textAlign: props.inputTextAlign}"
					    @input="inputFn($event)"
						@blur="emits('blur')" />
                    <textarea
                        v-if="props.inputType === 'textarea'"
                        :value="props.modelValue"
                        :placeholder="props.placeholder || ('请输入' + props.label)"
                        :maxlength="props.maxlength"
                        placeholder-class="textarea-placeholder"
                        :style="{textAlign: props.inputTextAlign}"
                        @input="inputFn($event)"
						@blur="emits('blur')" />
                    <view class="gy-form-item-select" v-if="props.inputType === 'select'">
                        <view
                            v-if="!props.modelValue || props.modelValue.length === 0"
                            class="gy-form-item-select-show input-placeholder"
                            :style="{textAlign: props.inputTextAlign}"
                            @click.stop="showPickerFn">{{ props.placeholder || ('请选择' + props.label) }}</view>
                        <view
                            v-else
                            class="gy-form-item-select-show"
                            :style="{textAlign: props.inputTextAlign}"
                            @click.stop="showPickerFn">{{ filterValueFn() }}</view>
                        <view class="gy-form-item-select-arrow gy_icon_arrowRight"></view>
                        <com-picker
                            v-if="picker.show"
                        	:mode="picker.mode"
                        	:dateTimeFormat="props.dateTimeFormat"
                        	:startDateTime="props.startDateTime"
                        	:endDateTime="props.endDateTime"
                        	:title="picker.title"
                        	:modelValue="props.modelValue"
                            :option="props.inputOption"
                        	@close="picker.show = false"
                        	@submit="submitPickerFn" />
                    </view>
					<view class="gy-form-item-select" v-if="props.inputType === 'custom-select'">
						<view
						    v-if="!props.modelValue || props.modelValue.length === 0"
						    class="gy-form-item-select-show input-placeholder"
						    :style="{textAlign: props.inputTextAlign}"
						    @click.stop="showPickerFn">{{ props.placeholder || ('请选择' + props.label) }}</view>
						<view
						    v-else
						    class="gy-form-item-select-show"
						    :style="{textAlign: props.inputTextAlign}"
						    @click.stop="showPickerFn">{{ props.modelValue }}</view>
						<view class="gy-form-item-select-arrow gy_icon_arrowRight"></view>
					</view>
                    <view class="gy-form-item-switch" v-if="props.inputType === 'switch'">
                        <com-switch :modelValue="props.modelValue" :activeValue="1" :inactiveValue="0" @change="switchChangeFn" />
                    </view>
                    <view class="gy-form-item-radio" v-if="props.inputType === 'radio'">
                        <com-radio
							:modelValue="props.modelValue"
							v-for="(item, index) in props.inputOption"
							:key="index"
							:activeValue="item.value"
							@change="radioChangeFn">
                            {{ item.label }}
                        </com-radio>
                    </view>
										<text v-if="props.unit" class="form-item-unit">{{ props.unit }}</text>
                </slot>
            </view>
        </view>
        <slot name="extend"></slot>
	</view>
</template>

<script lang="ts" setup>

    import {
    	ref, watch, nextTick
    } from "vue";

    const emits = defineEmits(["update:modelValue", "blur", "custom"]);

    const props = defineProps({
		show: {
			type: Boolean,
			default: true
		},
    	modelValue: {
    		type: [String, Number, Array, Boolean],
    	},
    	label: {
    		type: String
    	},
        subLabel: {
    		type: String
    	},
    	labelWidth: {
    		type: String,
            default: "160rpx"
    	},
		labelPosition: {
			type: String,
		    default: "inline"
		},
        required: {
    		type: Boolean,
            default: false
    	},
		border: {
			type: Boolean,
		    default: true
		},
    	inputType: {
    		type: String,
    		default: "text"
    	},
        maxlength: {
    		type: Number,
    		default: 500
    	},
        inputModel: {
        	type: String,
        	default: "text"
        },
        inputOption: {
        	type: Array,
        	default: () => []
        },
        inputTextAlign: {
    		type: String,
    		default: "right"
    	},
        placeholder: {
    		type: String
    	},
		dateTimeFormat: {
			type: String,
			default: "yyyy-MM-dd HH:mm:ss"
		},
		startDateTime: {
			type: String,
			default: "1970/01/01 00:00:00"
		},
		endDateTime: {
			type: String,
			default: "2099/12/31 00:00:00"
		},
		unit: {
			type: String,
		},
		precision: {
			type: Number,
			default: 2
		}
    });

    const picker = ref({
        show: false,
        title: "",
        mode: ""
    });
		const inputValue = ref(props.modelValue);
		const inputRef = ref(null)

	function filterValueFn(){
		for (let i = 0; i < props.inputOption.length; i++) {
			if(props.modelValue === props.inputOption[i].value){
				return props.inputOption[i].label;
			}
		}
		return props.modelValue;
	}

    function showPickerFn(){
        if(props.inputType === "custom-select"){
            emits('custom');
        }else{
            picker.value.mode = props.inputModel;
            picker.value.title = props.label;
            picker.value.show = true;
        }
    }
    function submitPickerFn(str: any, arr: any){
		if(picker.value.mode === "custom"){
			let vals = [];
			for (let i = 0; i < arr.length; i++) {
				vals.push(arr[i].value);
			}
			emits('update:modelValue', vals.join(","))
		}else{
			emits('update:modelValue', str)
		}
    }

    function inputFn(e: any){
        emits('update:modelValue', e.target.value);
    }

		watch(() => props.modelValue, val => {
			inputValue.value = val;
		});
		function inputNumberFn(e: any){
			// 限制输入传入的小数位数
			// 使用正则表达式限制输入
      // const regex = /^(0|[1-9]\d*)(\.\d{0,1})?$/;
			const precision = props.precision;
			const regex = new RegExp(`^$|^(0|[1-9]\\d*)(\\.\\d{0,${precision}})?$`);
			if (regex.test(e.target.value)) {
				emits('update:modelValue', e.target.value);
			} else {
				// 如果不符合规则，恢复到上一次合法的值
				nextTick(() => {
					inputValue.value = props.modelValue;
				})
			}
		}
    function switchChangeFn(val: Boolean | String | Number){
        emits("update:modelValue", val);
    }
    function radioChangeFn(val: Boolean | String | Number){
        emits("update:modelValue", val);
    }

	defineExpose({
		name: "gy-form-item",
		props: props
	});

</script>

<script lang="ts">
	export default {
		options: {
			multipleSlots: true,
			styleIsolation: 'shared',
			addGlobalClass: true,
			virtualHost: true
		}
	}
</script>

<style lang="scss" scoped>
	.gy-form-item{
	    min-height: 100rpx;
	    font-size: var(--gy-font-size-30);
	    .gy-form-item-box{
	        min-height: 108rpx;
			@include flex-between-center;
	        .gy-form-item-label{
				color: var(--pt-text-color-title);
				font-weight: 600;
	            .required{
	                color: var(--gy-color-error);
	                margin-right: 5rpx;
					// font-weight:100;
	            }
	            .sub-label{
	                font-size: var(--gy-font-size-small);
	                color: var(--pt-text-color-subtitle);
	                margin-right: 5rpx;
									font-weight: normal;
	            }
	        }
	        .gy-form-item-value{
							display: flex;
							align-items: center;
							gap: 24rpx;
							.form-item-unit {
								width: 44rpx;
								color: #222222;
							}
	            input{
	                width: 100%;
	                height: 70rpx;
	            }
	            textarea{
	                width: 100%;
	                height: 140rpx;
	            }
	            .gy-form-item-select{
	                width: 100%;
	                @include flex-between-center;
									gap: 8rpx;
	                .gy-form-item-select-show{
	                    width: calc(100% - 30rpx);
						padding: 20rpx 0;
	                }
	                .gy-form-item-select-arrow{
	                    width: 30rpx;
	                    @include flex-end-center;
	                    margin-top: 5rpx;
	                    font-size: var(--gy-font-size-small);
	                    color: var(--gy-text-color-placeholder);
	                    font-weight: bold;
	                }
	            }
	            .gy-form-item-switch{
	                @include flex-end-center;
					:deep(.gy-switch){
						display: block;
					}
	            }
	            .gy-form-item-radio{
	                @include flex-end-center;
					:deep(.gy-radio){
						padding: 0;
						margin-left: 30rpx;
					}
	            }
	        }
	    }
		.gy-form-item-box.top{
			display: block;
			padding: var(--gy-gap) 0;
			.gy-form-item-label{
				width: 100% !important;
			}
			.gy-form-item-value{
				width: 100% !important;
				padding-left: 20rpx;
				padding-top: 20rpx;
				.gy-form-item-radio{
				    @include flex-start-center;
					:deep(.gy-radio){
						padding-left: 0;
						margin-right: 30rpx;
					}
				}
			}
		}
	}
	.gy-form-item.active:active{
	    background-color: #f7f7f7;
	}
	.gy-form-item.border{
		border-top: 1rpx solid var(--gy-card-line-color);
	}
</style>
